  <!DOCTYPE HTML>
 <html lang="pt-br">
<head>
	<meta charset="UTF-8">

	<title>Title of the document</title>
     <link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="screen"/>
     <link rel="stylesheet" type="text/css" href="css/capslide.css" media="screen"/>
       

    <script src="js/jquery.js" type="text/javascript"></script>
	<script src="js/jquery.lazyload.js" type="text/javascript"></script>
	<script src="js/image.js" type="text/javascript"></script>
  
	<style type="text/css">
	 

	

	</style>	
</head>
<body>
<div class="content">
    <button>Get External Content</button>
	<div class="row clearfix">
		<div class="col-md-12 column">
			<div  id="loadevento"></div>
		</div>
	</div>



	<script type="text/javascript">


		$(document).ready(function(){
	    		      
 			
		 

		     $("button").one("click", function() {
			      $.ajax({
				          url: "3.html",
				          type: 'get',
				          beforeSend : function() {
				          		var url = window.location.protocol + "//" + window.location.host + "/"+"js/lasyload/img/loadingsmall.gif";
          		           		$("#loadevento").html("<img src='"+url+"' >");

				          },
				          error: function() {
				           		$("#loadevento").html(':(');
				          },
				          success: function(result){
				          		/*$("#loadevento").html(result);
				          		$('#loadevento').imageload({
				          		 	   imgTarget: '.lazy',
						               captionTarget : '.caption',
						               effectImg: 'fadeIn',
				          		 });*/
				          }
			      });        
		 });
		 




});
	</script>
</body>

</html>